<template>
	<view class="page">
		<!-- <uninavbar title="用户登录" leftIcon='leftIcon' rightIcon='' rightText="" /> -->
		<view class="status-bar"></view>
		<view class="content">
			<view class="logo" v-if="false">
				<image :lazy-load="true" src="../../static/images/logo2.png"></image>
			</view>
			<view class="list">
				<view class="item">
					<iconfont type="mobile"></iconfont>
					<input class="input" v-model="mobile" type="text" maxlength="11" placeholder="请输入手机号" @keydown.enter="handleEnter" />
				</view>
				<view class="item">
					<iconfont type="pwd"></iconfont>
					<input class="input" v-model="password" type="text" maxlength="32" placeholder="请输入密码"
						password="true" @keydown.enter="handleEnter" />
				</view>
			</view>
			<view class="button" hover-class="button-hover" @tap="userLogin"><text>登录</text></view>
			<view class="other">
				<navigator url="forget" open-type="navigate">忘记密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账户</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import iconfont from '@/components/iconfont/iconfont.vue';
	import validator from '@/common/validator';
	import API from '@/config/newApi.js'
	import JSEncrypt from 'jsencrypt';
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	const JSE = new JSEncrypt();
	export default {
		components: {
			iconfont,
			uninavbar
		},
		data() {
			return {
				mobile: '',
				password: '',
				originUrl: '',
				hasLogin: false,
				loginKey: null,
			};
		},
		onUnload() {
			if (this.originUrl.search('/pages/common/login') != '-1') {
				uni.reLaunch({
					url: '../article/index'
				});
			}

		},
		onShow() {
			this.getPublicKey()
		},
		onLoad(e) {
			// let loginOriginUrl = uni.getStorageSync('loginOriginUrl');
			// if (loginOriginUrl) {
			// 	this.originUrl = loginOriginUrl;
			// 	setTimeout(() => {
			// 		uni.removeStorageSync('loginOriginUrl');
			// 	}, 1000);
			// 	console.log(this.originUrl);
			// }
			
		},
		
		computed: mapState(['isLogin']),
		methods: {
			handleEnter(){
				 console.log('回车键被按下');
				 this.userLogin()
			},
			// globalKeyUp(event) {
			// 	if (event.key == 'Enter') {
			// 		console.log('全局回车键被按下');
			// 		// 在这里执行你的逻辑
			// 		if(this.mobile!=''&&this.password!=''){
			// 			this.userLogin()
			// 		}
			// 	}
			// },
			getPublicKey() {
				API.getPublicKey().then(res => {
						if (res.code == 200) {
							this.loginKey = res.data
							JSE.setPublicKey(this.loginKey)
						}
					})
					.catch(err => {
						console.log(err)
					})
			},

			...mapMutations(['login']),
			userLogin: function() {
				if (this.loginKey !== null) {
					let data = {
						username: JSE.encrypt(this.mobile),
						password: JSE.encrypt(this.password)
					}
					API.ssoLogin(data).then(res => {

							if (res.code == 200) {
								this.$store.state.token=res.data.token
								uni.setStorageSync('loginInfo', JSON.stringify(res.data));
								uni.setStorageSync('platform', 'h5');
								uni.setStorageSync('source', 'login');
								uni.switchTab({
									url: '/pages/article/index'
								});
							}
						})
						.catch(err => {
							console.log(err)
						})
				}
			}
		}
	};
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 0rpx;

		.logo {
			margin-top: 143rpx;
			margin-left: auto;
			margin-right: auto;

			image {
				height: 65rpx;
				width: 80rpx;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			padding-top: 40rpx;
			padding-left: 100rpx;
			padding-right: 100rpx;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 1upx solid rgba(230, 230, 230, 1);

				.icon {
					color: #ababab;
					margin-right: 5rpx;
					font-size: 40rpx;
				}

				.input {
					flex: 1;
					text-align: left;
					font-size: 30rpx;
					margin-left: 16rpx;
				}
			}
		}

		.button {
			margin-top: 100rpx;
		}

		.other {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top: 60rpx;
			color: #6954D5;
			text-align: center;
			height: 40rpx;
			line-height: 40rpx;

			text {
				font-size: 24rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>